<template>
  <div class="room-pay-card flex-col-start">
    <div class="item">
      <el-image :src="room.image" class="room-pay-card-image "></el-image>
    </div>
    <h2 class="item">{{room.apartmentName}}</h2>
    <div class="item">{{room.roomName}}</div>
    <div class="price item">{{room.currency}}{{room.price}}</div>
    <el-divider></el-divider>
    <div class="flex-col-start item">
      <div style="margin-bottom: 20px">选择入住日期/搬出日期</div>
      <el-date-picker
          @change="handleDateChange"
          unlink-panels
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="入住日期"
          :picker-options="pickerOptions"
          end-placeholder="搬出日期">
      </el-date-picker>

      <div v-show="date[0]" style="padding: 10px;margin-top: 20px;background-color: #EAECF4;color: #a16cf1">
        {{computedDuration}}
      </div>

      <el-divider></el-divider>
    </div>

    <div class="item">
      <div class="flex-row-between">
        <h2>总金额</h2>
        <div class="price">{{room.currency}}{{order.total}}</div>
      </div>
    </div>
    <el-divider></el-divider>

    <div class="item">
        <h2>可用的租金支付方案</h2>
        <div style="padding: 10px;background-color: #EAECF4;color: #7585B8">一次付清</div>
    </div>
    <div class="item" style="font-size: 14px;">
      <i class="el-icon-warning" style="color:#FCCE01;"></i>
      支付方案仅针对租金，你需要支付一部分租金和其他费用以便完成预订。
    </div>
    <transition name="el-zoom-in-top">
      <div class="qr-code-box flex-col-start" v-show="showQrCode" v-loading="loading" ref="qrCode">
        <h4>请使用支付宝扫码支付</h4>
        <div style="font-size: 13px;color: grey">(请在十分钟内完成支付)</div>
        <el-image :src="qrCodeSrc" alt="图片" class="qr-code"></el-image>
      </div>
    </transition>


    <div class="item">
      <CommonButton @click="submit" v-show="showSubmitBtn">立即预定</CommonButton>
    </div>


  </div>
</template>

<script>
import {formatDate, getDiffDay} from "@/util/DateUtil";
import CommonButton from "@/components/button/CommonButton.vue";
import aliPayApi from "@/api/pay/AliPay";
import orderApi from "@/api/order/order";
import {goTo} from "@/util/common";
import {TokenUtil} from "@/util/TokenUtil";

export default {
  name: "RoomPayCard",
  components: {CommonButton},
  props:{
    room:{
      type:Object
    }
  },
  data() {
    return {
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      loading:false,
      showQrCode:false,
      showSubmitBtn:true,
      qrCodeSrc:"/api/order/qrCode/error",
      date:[],
      duration:0,
      order:{

        // 单价
        unitPrice:5,
        total:100,
      }
    }
  },
  methods: {formatDate,
    check(){
      if(this.date && this.date[0] && this.date[1]){
        return true
      }


      return false
    },
    startPollingOrderStatus(uuid){
      let interval=setInterval(()=>{
            orderApi.getOrderStatus(uuid).then(resp => {
              if (resp.data === 1) {
                // 订单完成
                this.showQrCode = false
                this.$emit("success")
                clearInterval(interval)

              } else if (resp.data === 2) {
                // 订单被取消
                this.showQrCode = false
                this.$emit("error")
                clearInterval(interval)

              } else {
                // 订单待支付

                return false
              }
            })
      },1500)
    },
    submit(){
      // 检查日期
      if(!this.check()){
        this.$message.error("请选择日期")
        return
      }
      // 检查登录
      let checkLogin = TokenUtil.checkLogin(this);
      if(!checkLogin){
        this.$message.warning("请先登录")
        return
      }

      let order={
        roomId:this.room.id,
        fromDate:this.date[0],
        toDate:this.date[1]
      }
      this.loading=true
      orderApi.addOrder(order).then(resp=>{
           if(resp.code === 200){

              this.qrCodeSrc="/api/order/qrCode?uuid="+resp.data
             // 显示二维码
             this.showQrCode=true
             // 隐藏提交按钮
             this.showSubmitBtn=false
             // 跳转到二维码

           //  开启段轮询订单状态
             this.startPollingOrderStatus(String(resp.data))

           }else{
             this.$message.error(resp.msg)
           }
        this.loading=false
      })

    },
    handleDateChange(val){
      // TODO 请求后端看日期内是否可选


    },
    initPickerDisable(){
      let fromDate=new Date(this.room.fromDate)
      let toDate = new Date(this.room.toDate)
      // 初始化判断可选日期的方法
      this.pickerOptions.disabledDate=(time)=>{
        return time < fromDate || time > toDate
      }
    }

  },
  computed:{
    computedDuration(){
      if(this.date && this.date[0] && this.date[1]){
        this.duration = getDiffDay(this.date[0],this.date[1]);
        return '间隔:'+this.duration +'天'
      }
      return ''
    }
  },
  mounted() {
    this.initPickerDisable()
  }
}
</script>

<style scoped lang="less">
  .room-pay-card{
    padding: 10px 20px;
    .qr-code-box{
      width: 200px;
      padding: 20px;
      border: 1px solid grey;
      border-radius: 2px;
      margin: 40px 0;
    }
    .item{
      width: 100%;
      text-align: left;
      margin: 10px 0;
    }
    .room-pay-card-image{
      width: 100%;
    }
  }
</style>